/* 如果想要对ES6中内置API做兼容处理 */
// import 'react-app-polyfill/ie9';
// import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.less'

const root = ReactDOM.createRoot(document.getElementById('root'));

// class Count extends React.Component {
//   state = { num: 0 }
//   render() {
//     let { num } = this.state
//     return <>
//       <div> create-react-app创建的项目</div>
//       <span>{num}</span>
//       <br />
//       <button onClick={() => {
//         num++; this.setState({
//           num
//         })
//       }}>累加</button>
//     </>
//   }
// }
// root.render(
//   <Count />
// );

// let text = 'hello'
// let num = Infinity
// let flag = false // 渲染出来是空
// let und = undefined // 渲染出来是空
// let obj = { name: '张三' }
// let arr = [10, 20, 30]
// let fun = function () { return 'hello' }
// root.render(
//   // <React.StrictMode>
//   //   <div>react脚手架创建项目</div>
//   // </React.StrictMode>
//   <>
//     <div>{text} create-react-app创建的项目</div>
//     <button>124</button>
//     <p>{num}</p>
//     <p>{flag} -- {und}</p>
//     {/* <p>{obj}</p> */}
//     <p>{arr}</p>
//     <p>{fun}</p>{/* 报错 */}
//     <p>{fun()}</p>{/* 但可以调用函数，渲染函数的返回值 */}


//     {/*  <div style="color:red">给元素设置行内样式</div>  报错*/}
//     <div style={{ color: 'red', fontSize: '20px' }}> 给元素设置行内样式</div>
//     <div className='box'>设置样式类名</div>

//     {/* 案例1： 基于变量的值来确定元素是否显示在页面上 */}
//     {/* 控制元素的样式，不论显示还是隐藏，元素本身都渲染出来了 */}
//     <button style={{ display: flag ? 'block' : 'none' }}>按钮1</button>
//     {/* 控制元素是否渲染 */}
//     {flag ? <button>按钮2</button> : null}
//     {/* 控制文字显示 */}
//     <button>{flag ? '按钮3' : '按钮4'}</button>

//   </>
// );

// 案例2：从服务器获取到列表数据，想循环动态绑定相关内容
let data = [
  { id: 1, title: '商品1', price: 100 },
  { id: 2, title: '商品2', price: 200 },
  { id: 3, title: '商品3', price: 300 },
]
root.render(
  <>
    <ul>
      {data.map((item, index) => {
        // 循环创建的元素一定要设置key属性，并且key的值要唯一(优化DOM-DIFF)
        return <li key={item.id}>
          <em>{index + 1}</em>&nbsp;&nbsp;
          <span>{item.title}</span>
          <span style={{ color: 'red', marginLeft: '10px' }}>{item.price}</span>
        </li>
      })}
    </ul>
    <br />
    {/* 扩展需求： 没有数组，只是想循环五次生成五个button */}
    {new Array(5).fill(null).map((_, index) => {
      return <button key={index}>
        按钮{index + 1}
      </button>
    })}
  </>
)

// 请求简书地址
fetch('/jian/subscriptions/recommended_collections').then(response => response.json()).then(val => console.log(val))
fetch('/zhi/news/latest').then(response => response.json()).then(val => console.log(val))
